<template>
  <div class="container">
    <div class="title-container">
      <div class="left-box">
        <el-form ref="form" :model="searchForm" :inline="true" class="formClass">
          <el-form-item>
            <el-input
              prefix-icon="el-icon-search"
              type="input"
              placeholder="请输入公司名称"
              v-model="searchForm.customerName"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <global-card>
      <template #content>
        <div class="addAccount">
          <el-button type="primary" icon="el-icon-plus" size="medium" @click="handlerAdd">新建</el-button>
          <el-button
            type="success"
            icon="el-icon-refresh"
            size="medium"
            @click="refresh">刷新
          </el-button>
        </div>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          class="elTable"
          ref="tableRef"
          v-loading="loading"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          />
          <el-table-column prop="companyCode" label="公司编码" align="center"/>
          <el-table-column prop="companyName" label="公司名称" align="center"/>
          <!--          <el-table-column prop="" label="公司类型" align="center">-->
          <!--            <template slot-scope="{ row }">-->
          <!--              <span>{{ row.companyType == 1 ? "科技" : "文化"}}</span>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column
            prop="contractAmount"
            label="合同金额（元）"
            align="center"
          />
          <el-table-column prop="contractYear" label="合同年度" align="center">
          </el-table-column>

          <el-table-column label="合同到期日" align="center" prop="expireTime">
            <template slot-scope="scope">
              {{ scope.row.contractMaturityTime }}
            </template>
          </el-table-column>
          <el-table-column prop="purchaseTime" label="创建人" align="center">
            <template slot-scope="scope">
              {{ scope.row.createByName }}
            </template>
          </el-table-column>

          <el-table-column label="创建时间" align="center" prop="expireTime">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" prop="expireTime">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="handlerDetail(scope.row)">查看</el-button>
              <el-button type="primary" size="mini" @click="handlerDetail2(scope.row)">分佣记录</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <pagination
          class="pagination"
          :total="count"
          :page.sync="pageIndex"
          :limit.sync="pageSize"
          @pagination="pagination"
        />
      </template>
    </global-card>

    <yc-dialog ref="addDialog" dialogTitle="新建" :show-center="false">
      <template #content>
        <div class="dialog-content">
          <el-form
            ref="accountModelRef"
            :rules="newAccountModelRules"
            :model="newAccountModel"
            label-width="90px"
            :disabled="detailsDisabled"
          >
            <el-form-item label="公司名称" prop="companyCode">
              <el-select v-model="newAccountModel.companyCode" @change="projectChange">
                <el-option
                  v-for="(item,index) in companyList"
                  :key="item.companyCode"
                  :label="item.companyName"
                  :value="item.companyCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="合同金额" prop="contractAmount">
              <el-input
                type="number"
                v-model="newAccountModel.contractAmount"
                :disabled="detailsDisabled"
              />
            </el-form-item>
            <el-form-item label="合同年度" prop="contractYear">
              <el-date-picker
                v-if="!detailsDisabled"
                v-model="newAccountModel.contractYear"
                type="year"
                value-format="yyyy"
                format="yyyy"
                placeholder="选择年">
              </el-date-picker>
              <el-input
                v-else
                v-model="newAccountModel.contractYear"
                :disabled="detailsDisabled"
              />
            </el-form-item>
            <el-form-item label="打款照片" prop="paymentUrl">
              <el-upload
                :action="$uploadUrl + upload"
                class="avatar-uploader"
                v-model="newAccountModel.paymentUrl"
                :headers="headers"
                :show-file-list="false"
                :on-success="handleLogoSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="newAccountModel.paymentUrl"
                  :src="newAccountModel.paymentUrl"
                  class="avatar"
                />
                <i
                  v-else
                  class="el-icon-plus avatar-uploader-icon"
                  :class="{ drop: detailsDisabled }"
                ></i>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" :loading="addOrUpdateLoading" @click="dialogSave">确定</el-button>
        <el-button @click="$refs.addDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>

    <yc-dialog ref="fyjlDialog" dialogTitle="分佣记录" :show-center="false" dialogWidth="60%">
      <template #content>
        <div class="dialog-content">
          <el-table
            :data="tableData2"
            border
            style="width: 100%"
          >
            <el-table-column type="index" label="序号" width="80" align="center"/>
            <el-table-column prop="userCode" label="分佣人编码" align="center"/>
            <el-table-column prop="userName" label="分佣人" align="center"/>
            <el-table-column prop="getAmount" label="分佣金额" align="center"/>
            <el-table-column prop="getType" label="分佣类型" align="center"/>
            <el-table-column prop="contractCode" label="合同编号" align="center"/>
            <el-table-column prop="createTime" label="创建时间" align="center"/>
          </el-table>
        </div>
      </template>
      <template #footer>
<!--        <el-button type="primary" :loading="addOrUpdateLoading" @click="dialogSave">确定</el-button>-->
        <el-button @click="$refs.fyjlDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>
  </div>
</template>

<script>
  import ycDialog from "@/components/pageDialog"
  import { getToken } from "@/utils/auth"
  import {
    queryContractPage,
    queryContractList,
    insertByCustomize,
    queryAmountTurnoverList
  } from "@/api/accountContractMessage/accountContract"
  import { queryCompanyList } from "@/api/corporationMessage/corporationInfo"

  export default {
    components: {
      ycDialog
    },
    data() {
      return {
        tableData2: [],
        tableData: [],
        count: 1,
        pageIndex: 1,
        pageSize: 20,
        companyTypeList: [
          { id: 1, name: "科技" },
          { id: 2, name: "文化" }
        ],
        searchForm: {
          customerName: "",
          projectName: "",
          select: ""
        },
        companyList: [],
        newAccountModel: {
          companyCode: "",
          contractAmount: "",
          contractYear: "",
          paymentUrl: ""
        },
        newAccountModelRules: {
          companyCode: [{ required: true, message: "请选择公司名称", trigger: "change" }],
          contractAmount: [{ required: true, trigger: "blur", message: "请输入合同金额" }],
          contractYear: [{ required: true, message: "请选择合同年度", trigger: "change" }],
          paymentUrl: [{ required: true, message: "请上传打款照片", trigger: "change" }]
        },
        headers: {
          token: getToken()
        },
        upload: "/uploadManager/upload",
        allProjectList: [],

        addOrUpdateLoading: false,
        detailsDisabled: false,
        loading: false
      }
    },
    created() {
      this.getPageCashFlow()
    },
    methods: {
      searchClick() {
        this.getPageCashFlow()
      },
      async getPageCashFlow() {
        this.loading = true
        const { customerName, projectName, select } = this.searchForm
        const { object } = await queryContractPage({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        })
        this.loading = false
        this.count = object.count
        this.tableData = object.data
      },
      pagination(pageItem) {
        this.getPageCashFlow(pageItem.page, pageItem.limit)
      },

      handlerAdd() {
        this.dialogCenterTitle = "新建合同"
        this.dialogTitle = "新建合同"

        this.queryCompanyList()
        Object.keys(this.newAccountModel).forEach((item) => {
          this.newAccountModel[item] = ""
        })

        this.detailsDisabled = false
        this.$refs.addDialog.dialogVisible = true
      },
      async queryCompanyList() {
        const { object } = await queryCompanyList()
        this.companyList = object
      },

      projectChange(val) {
        this.newAccountModel.projectCode = val
        this.queryProjectOfAnFee()
      },

      async handlerDetail(row) {
        await this.queryCompanyList()

        this.newAccountModel.companyCode = row.companyCode
        this.newAccountModel.contractAmount = row.contractAmount
        this.newAccountModel.contractYear = row.contractYear
        this.newAccountModel.paymentUrl = row.paymentUrl

        this.detailsDisabled = true
        this.$refs.addDialog.dialogVisible = true
      },

      handleLogoSuccess(id, file) {
        this.newAccountModel.paymentUrl = file.response.object.url
      },
      beforeAvatarUpload(file) {
        // const isType = this.fileType.includes(file.type)
        const isLt2M = file.size / 1024 / 1024 < 5

        // if (!isJPG) {
        //   this.$message.error("上传头像图片只能是 JPG 格式!")
        // }
        // if (!isType) {
        //   this.$message.error("上传文件格式有问题！")
        // }
        // if (!isLt2M) {
        //   this.$message.error("上传头像图片大小不能超过 5MB!")
        // }
        // return isJPG && isLt2M
        // return isType && isLt2M
      },
      dialogSave() {
        this.$refs.accountModelRef.validate(async (v) => {
          if (v) {
            if (this.detailsDisabled) {
              this.$refs.addDialog.dialogVisible = false
            } else {
              const { message, status } = await insertByCustomize(this.newAccountModel)
              if (status == 200) {
                this.getPageCashFlow(1, 20)
                this.$message.success(message)
                this.$refs.addDialog.dialogVisible = false
              }
            }
          }
        })
      },

      handlerDetail2(row) {
        queryAmountTurnoverList({
          contractCode: row.contractCode
        }).then(res => {
          this.tableData2 = res.object
        })
        this.$refs.fyjlDialog.dialogVisible = true
      },


      refresh() {
        this.searchForm = {
          customerName: "",
          projectName: "",
          select: ""
        }
        this.getPageCashFlow()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .title-container {
    display: flex;
    justify-content: flex-end;
    margin-right: 20px;

    .left-box {
      /*width: 600px;*/

      .formClass {
        /*display: flex;*/
        /*justify-content: space-around;*/
        /*margin-right: 20px;*/

        ::v-deep .el-form-item {
          margin-top: 20px;
          margin-bottom: 0;

          .el-input {
            padding-right: 8px;
          }

          .el-select {
            width: 181px;
            margin-left: 10px;
          }

          .el-select .el-input {
            width: 100%;
          }
        }
      }
    }
  }
</style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    /* cursor: no-drop; */
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .drop {
    cursor: no-drop;
  }
</style>
